<script setup>
import { ref, computed, watch, onMounted } from 'vue'


const props = defineProps({
  data: Object,
})

const unqualifiedInfoList = computed(() => props.data[0] || [])
const acceptanceCheckRecords = computed(() => props.data[1] || [])
const checkRecords = computed(() => props.data[2] || [])
const lawEnforcementList = computed(() => props.data[3] || [])
</script>

<template>
    <div class="project-baseinfo">
        <div class="head">项目施工管理信息</div>
        <div class="content">
            <div class="panel">
                <div class="panel-title">不合格信息</div>
                <el-scrollbar style="height: 330px;">
                    <div class="info-item" v-for="item in unqualifiedInfoList" :key="item.pkid">
                        <div class="info-line point">
                            <span class="tit">检测日期：</span>
                            <span>{{ item.spotCheckTime }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">天气：</span>
                            <span>{{ item.weather }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">形象进度：</span>
                            <span>{{ item.imageProgress }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">检查部位：</span>
                            <span>{{ item.checkPoint }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">现场抽查：</span>
                            <span>{{ item.spotCheck }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">监督处理意见：</span>
                            <span>{{ item.handleRemark }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">提交时间：</span>
                            <span>{{ item.handleTime }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">记录类型：</span>
                            <span>{{ item.recordType }}</span>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
            <div class="panel">
                <div class="panel-title">验收信息</div>
                <el-scrollbar style="height: 330px;">
                    <div class="info-item" v-for="item in acceptanceCheckRecords" :key="item.pkid">
                        <div class="info-line point">
                            <span class="tit">检测日期：</span>
                            <span>{{ item.spotCheckTime }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">天气：</span>
                            <span>{{ item.weather }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">形象进度：</span>
                            <span>{{ item.imageProgress }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">检查部位：</span>
                            <span>{{ item.checkPoint }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">现场抽查：</span>
                            <span>{{ item.spotCheck }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">监督处理意见：</span>
                            <span>{{ item.handleRemark }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">提交时间：</span>
                            <span>{{ item.handleTime }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">记录类型：</span>
                            <span>{{ item.recordType }}</span>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
            <div class="panel">
                <div class="panel-title">检测记录</div>
                <el-scrollbar style="height: 330px;">
                    <div class="info-item" v-for="item in checkRecords" :key="item.pkid">
                        <div class="info-line point">
                            <span class="tit">检测日期：</span>
                            <span>{{ item.spotCheckTime }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">天气：</span>
                            <span>{{ item.weather }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">形象进度：</span>
                            <span>{{ item.imageProgress }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">检查部位：</span>
                            <span>{{ item.checkPoint }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">现场抽查：</span>
                            <span>{{ item.spotCheck }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">监督处理意见：</span>
                            <span>{{ item.handleRemark }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">提交时间：</span>
                            <span>{{ item.handleTime }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">记录类型：</span>
                            <span>{{ item.recordType }}</span>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
            <div class="panel">
                <div class="panel-title">现场执法信息</div>
                <el-scrollbar style="height: 330px;">
                    <div class="info-item" v-for="item in lawEnforcementList" :key="item.pkid">
                        <div class="info-line point">
                            <span class="tit">检测日期：</span>
                            <span>{{ item.spotCheckTime }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">天气：</span>
                            <span>{{ item.weather }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">形象进度：</span>
                            <span>{{ item.imageProgress }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">检查部位：</span>
                            <span>{{ item.checkPoint }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">现场抽查：</span>
                            <span>{{ item.spotCheck }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">监督处理意见：</span>
                            <span>{{ item.handleRemark }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">提交时间：</span>
                            <span>{{ item.handleTime }}</span>
                        </div>
                        <div class="info-line">
                            <span class="tit">记录类型：</span>
                            <span>{{ item.recordType }}</span>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.project-baseinfo {
    padding: 20px;
    box-sizing: border-box;
    .head {
        text-align: center;
        color: #fff;
        line-height: 40px;
        margin-bottom: 20px;
    }
    .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        
        .panel {
            width: 49%;
            border: 1px solid;
            border-image: linear-gradient(to bottom, #064F9300, #064F93) 1;
            margin-bottom: 20px;
            padding: 20px 0;
            .panel-title {
                width: 180px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                color: #049BED;
                border: 1px solid #049BED;
                margin-left: 26px;
            }
            .info-item {
                position: relative;
                margin-top: 10px;
                margin-bottom: 20px;
                margin-left: 26px;
            }
            .info-item::before {
                position: absolute;
                left: -18px;
                top: 9px;
                content: '';
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 14px;
                background: #00FDFA;
                margin-right: 10px;
            }
            .info-line {
                // display: flex;
                // align-items: center;
                line-height: 32px;
                color: #fff;
                white-space: wrap;
                .tit {
                    white-space: nowrap;
                }
                
            }
        }
    }
}
</style>